<template>
  <div> 
    <div class="attr-item-edit-wrapper dataPage" >
      <p class="attr-item-title">设置来源</p>
      <div class="flexG-1 attr-item-edit-input">
        <el-select v-model="fromData" size="mini">
          <el-option label="静态数据" value='1'>静态数据</el-option>
          <el-option label="API" value='2'>API</el-option>
        </el-select>
      </div>
    </div>
    <globalDataTemplate :xAxisData="xAxisData" :seriesData="seriesData" listType="2"  />

  </div>

</template>

<script>
	import {mapState, mapGetters} from 'vuex'
  import globalDataTemplate  from '../../globalDataTemplate'
	export default {
		name:'contrast-bar-chart-data',
    components: {
      globalDataTemplate
		},
		props: {
			value: Object
		},
    data() {
      return {
        fromData: '1',
      }
    },
    computed: {
			...mapState({
				projectData: state => state.editor.projectData,
				activePageUUID: state => state.editor.activePageUUID,
				activeElementUUID: state => state.editor.activeElementUUID,
				activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
			}),
			...mapGetters([
				'currentPageIndex',
				'activeElementIndex',
				'activeElement',
				'activePage'
			]),
      xAxisData() {
        return this.activeElement.propsValue.contrastBarChartForm.xAxis.data;
      },
      seriesData(){
        return this.activeElement.propsValue.contrastBarChartForm.series;
      },
      // nameListData(){
      //   return this.activeElement.propsValue.barOptions.series;
      // }
		},
		
    watch: {
      lineSimpleStyleData:{
        deep:true, //深度监听设置为 true
        handler:function(newV,oldV){
        }
      },
    },
    
    methods: {
      addItem(value) {
        console.log(value);
      },
      removeItem(value) {
        console.log(value);


      }
    },
    created() {

		},
		mounted() {

		},
	}
</script>
<style lang="scss">
  .dataPage {
    .el-select{
      width: 100%;
    }
  }
</style>
<style lang="scss">
   .attr-item-edit-wrapper {
    // padding-left: 18px;
    display: flex;
    width: 100%;
    // text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
    }
    .attr-item-edit-input {
      &.flexG-1 {
        flex-grow: 1;
        margin-left: 10px;
      }
      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: $gray;
      }
    }
  }
</style>